<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">项目类别</label>
        <el-input v-model="query.bisYmkdzXmlb" clearable placeholder="项目类别" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1140px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务项目编号" prop="longtermServitemNo">
                <el-input v-model="form.longtermServitemNo" style="width: 370px;" disabled>
                  <el-button slot="append" icon="el-icon-search" title="打开长期护理服务项目目录" @click="openYmk" />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务项目名称" prop="bisYmkdzYbbm">
                <el-input v-model="form.longtermServitemName" style="width: 370px;" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务类型" prop="longtermServType">
                <el-select v-model="form.longtermServType" filterable placeholder="请选择" disabled style="width: 370px;">
                  <el-option
                    v-for="item in dict.PRIC_LONGTERM_SERV_TYPE"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自付比例" prop="selfpayProp">
                <el-input v-model="form.selfpayProp" style="width: 370px;" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="单价上限" prop="pricUplmt">
                <el-input v-model="form.pricUplmt" style="width: 370px;" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建议时长上限" prop="advDuraUplmt">
                <el-input v-model="form.advDuraUplmt" style="width: 370px;" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="医保区划" prop="nursOrgAdmdvs">
                <el-select v-model="form.nursOrgAdmdvs" filterable placeholder="请选择" disabled style="width: 370px;">
                  <el-option
                    v-for="item in dict.ccstcqh"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务项目单价" prop="nursOrgServitemPric">
                <el-input-number v-model="form.nursOrgServitemPric" :precision="2" :step="0.01" style="width: 370px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务项目计价单位" prop="nursOrgServitemPrcuntNo">
                <el-select v-model="form.nursOrgServitemPrcuntNo" filterable placeholder="请选择" disabled style="width: 370px;">
                  <el-option
                    v-for="item in dict.PRIC_PRCUNT_NO"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务项目备注" prop="nursOrgServitemMemo">
                <el-input v-model="form.nursOrgServitemMemo" style="width: 370px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!--            <el-col :span="12">
              <el-form-item label="启用状态">
                <el-select v-model="form.enabStas" filterable placeholder="请选择" disabled style="width: 370px;">
                  <el-option
                    v-for="item in dict.PRIC_ENAB_STAS"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="收费项目等级" prop="nursOrgChrgitmLv">
                <el-select v-model="form.nursOrgChrgitmLv" filterable placeholder="请选择" disabled style="width: 370px;">
                  <el-option
                    v-for="item in dict.PRIC_CHRGITM_LV"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--          <el-form-item label="护理机构服务项目编号">
            <el-input v-model="form.nursOrgServitemNo" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="护理机构服务项目名称">
            <el-input v-model="form.nursOrgServitemName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="护理机构服务项目类型">
            <el-input v-model="form.nursOrgServitemType" style="width: 370px;" />
          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="nursOrgServitemNo" label="护理机构服务项目编号" width="150px" align="center" />
        <el-table-column prop="nursOrgServitemName" label="护理机构服务项目名称" width="150px" align="center" />
        <el-table-column prop="nursOrgServitemType" label="护理机构服务项目类型" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_LONGTERM_SERV_TYPE[scope.row.nursOrgServitemType] }}
          </template>
        </el-table-column>
        <el-table-column prop="nursOrgChrgitmLv" label="收费项目等级" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_CHRGITM_LV[scope.row.nursOrgChrgitmLv] }}
          </template>
        </el-table-column>
        <el-table-column prop="selfpayPropType" label="目录自付比例类别" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_SELFPAY_PROP_TYPE[scope.row.selfpayPropType] }}
          </template>
        </el-table-column>
        <el-table-column prop="selfpayProp" label="自付比例" align="center" />
        <el-table-column prop="pricUplmt" label="单价上限" align="center" />
        <el-table-column prop="advDuraUplmt" label="建议时长上限" align="center" />
        <el-table-column prop="nursOrgAdmdvs" label="护理机构医保区划" align="center">
          <template slot-scope="scope">
            {{ dict.label.ccstcqh[scope.row.nursOrgAdmdvs] }}
          </template>
        </el-table-column>
        <el-table-column prop="nursOrgServitemPric" label="护理机构服务项目单价" align="center" />
        <el-table-column prop="nursOrgServitemPrcuntNo" label="护理机构服务项目计价单位" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_PRCUNT_NO[scope.row.nursOrgServitemPrcuntNo] }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="nursOrgServitemMemo" label="护理机构服务项目备注" width="250px" />
        <el-table-column prop="enabStas" label="启用状态" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_ENAB_STAS[scope.row.enabStas] }}
          </template>
        </el-table-column>
        <el-table-column prop="valiFlag" label="有效标志" align="center">
          <template slot-scope="scope">
            {{ dict.label.PRIC_VALI_FLAG[scope.row.valiFlag] }}
          </template>
        </el-table-column>-->
        <el-table-column v-if="checkPer(['admin','pricServiceItem:edit','pricServiceItem:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
      <el-drawer
        title="基础异名库"
        :visible.sync="drawerTable"
        direction="rtl"
        size="100%"
      >
        <div style="margin-left: 20px;margin-bottom: 10px">
          <!-- 搜索 -->
          <el-input v-model="paramlongtermServitemName" clearable size="small" placeholder="服务项目名称" style="width: 200px;" class="filter-item" />
          <el-select
            v-model="paramlongtermServType"
            clearable
            size="small"
            placeholder="长期护理服务类型"
            class="filter-item"
            style="width: 200px;margin-right: 5px"
          >
            <el-option
              v-for="item in dict.PRIC_LONGTERM_SERV_TYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button v-loading.fullscreen.lock="loading" class="filter-item" size="mini" type="success" icon="el-icon-search" :loading="loading" @click="getYmk">搜索</el-button>
        </div>
        <el-table ref="tableDrawer" v-loading="crud.loading" :data="ymkData" height="90%">
          <el-table-column type="index" :index="indexMethod" label="序号" align="center" />
          <el-table-column prop="longterm_servitem_no" label="护理服务项目编码" align="center" width="150px" />
          <el-table-column prop="longterm_servitem_name" label="护理服务项目名称" align="center" width="150px" />
          <el-table-column prop="longterm_serv_type" label="长期护理服务类型" align="center">
            <template slot-scope="scope">
              {{ dict.label.PRIC_LONGTERM_SERV_TYPE[scope.row.longterm_serv_type] }}
            </template>
          </el-table-column>
          <el-table-column prop="overlmt_dspo_way" label="超限价处理方式" align="center" width="150px">
            <template slot-scope="scope">
              {{ dict.label.PRIC_OVERLMT_DSPO_WAY[scope.row.overlmt_dspo_way] }}
            </template>
          </el-table-column>
          <el-table-column prop="pric_uplmt" label="单价上限" align="center" />
          <el-table-column prop="loc_admdvs" label="所属医保区划" align="center">
            <template slot-scope="scope">
              {{ dict.label.ccstcqh[scope.row.loc_admdvs] }}
            </template>
          </el-table-column>
          <el-table-column prop="ownpay_flag" label="自费标志" align="center">
            <template slot-scope="scope">
              {{ dict.label.PRIC_OWNPAY_FLAG[scope.row.ownpay_flag] }}
            </template>
          </el-table-column>
          <el-table-column prop="selfpay_prop_type" label="目录自付比例类别" align="center">
            <template slot-scope="scope">
              {{ dict.label.PRIC_SELFPAY_PROP_TYPE[scope.row.selfpay_prop_type] }}
            </template>
          </el-table-column>
          <el-table-column prop="selfpay_prop" label="自付比例" align="center" />
          <el-table-column prop="chrgitm_lv" label="收费项目等级" align="center">
            <template slot-scope="scope">
              {{ dict.label.PRIC_CHRGITM_LV[scope.row.chrgitm_lv] }}
            </template>
          </el-table-column>
          <el-table-column prop="serv_cont" label="服务内容" align="center" width="250px" />
          <el-table-column prop="prcunt_no" label="计价单位编号" align="center">
            <template slot-scope="scope">
              {{ dict.label.PRIC_PRCUNT_NO[scope.row.prcunt_no] }}
            </template>
          </el-table-column>
          <el-table-column prop="adv_dura_uplmt" label="指导时长上限" align="center" />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click.native.prevent="selectRow(scope.$index, ymkData)"
              >
                确定
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import crudPricServiceItem from '@/api/business/pricServiceItem'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { pricServiceItemId: null, longtermOrgServitemEvtId: null, longtermOrgServitemId: null, nurscareOrgName: null, nurscareOrgId: null, nurscareOrgNo: null, longtermServitemId: null, longtermServitemNo: null, longtermServitemName: null, longtermServType: null, selfpayPropType: null, selfpayProp: null, pricUplmt: null, advDuraUplmt: null, nursOrgServitemNo: null, nursOrgServitemName: null, nursOrgServitemType: null, nursOrgChrgitmLv: null, nursOrgAdmdvs: null, nursOrgServitemPric: null, nursOrgServitemPrcuntNo: null, nursOrgServitemMemo: null, enabStas: null, chkStas: null, oprtOpnn: null, rchkOpnn: null, servMattInstId: null, servMattNodeInstId: null, evtInstId: null, evtType: null, rid: null, crteTime: null, updtTime: null, crterId: null, crterName: null, crteOptinsNo: null, opterId: null, opterName: null, optTime: null, optinsNo: null, admdvs: null, valiFlag: null, dataVer: null, optDotId: null, asstPrdr: null, asstAvlCnt: null, asstSpec: null, asstType: null, asstProdType: null, centreAsstType: null, centreAsstProdType: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null }
export default {
  name: 'PricServiceItem',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['PRIC_LONGTERM_SERV_TYPE', 'PRIC_PRCUNT_NO', 'PRIC_CHRGITM_LV', 'PRIC_SELFPAY_PROP_TYPE', 'PRIC_OWNPAY_FLAG', 'PRIC_OVERLMT_DSPO_WAY', 'PRIC_ENAB_STAS', 'PRIC_VALI_FLAG', 'ccstcqh'],
  cruds() {
    return CRUD({ title: '护理机构服务项目', url: 'api/pricServiceItem', idField: 'pricServiceItemId', sort: 'pricServiceItemId,desc', crudMethod: { ...crudPricServiceItem }})
  },
  data() {
    return {
      paramlongtermServitemName: '',
      paramlongtermServType: '',
      drawerTable: false,
      ymkData: [],
      // 遮罩层
      loading: true,
      permission: {
        add: ['admin', 'pricServiceItem:add'],
        edit: ['admin', 'pricServiceItem:edit'],
        del: ['admin', 'pricServiceItem:del']
      },
      rules: {
        longtermServitemNo: [
          { required: true, message: '请选择服务项目', trigger: 'blur' }
        ],
        nursOrgServitemPric: [
          { required: true, message: '服务项目单价不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    /**
     * 异名库的序号
     * @param index
     * @returns {*}
     */
    indexMethod(index) {
      return index + 1
    },
    /**
     * 确认选择的项目
     * @param index
     * @param rows
     */
    selectRow(index, rows) {
      // console.log(rows[index])
      const ymk = rows[index]
      console.log(ymk)

      this.drawerTable = false
      this.form.longtermServitemId = ymk.longterm_servitem_id
      this.form.longtermServitemNo = ymk.longterm_servitem_no
      this.form.longtermServitemName = ymk.longterm_servitem_name
      this.form.longtermServType = ymk.longterm_serv_type
      this.form.selfpayPropType = ymk.selfpay_prop_type
      this.form.selfpayProp = ymk.selfpay_prop
      this.form.pricUplmt = ymk.pric_uplmt
      this.form.advDuraUplmt = ymk.adv_dura_uplmt
      this.form.nursOrgServitemNo = ymk.longterm_servitem_no
      this.form.nursOrgServitemName = ymk.longterm_servitem_name
      this.form.nursOrgServitemType = ymk.longterm_serv_type
      this.form.nursOrgChrgitmLv = ymk.chrgitm_lv
      this.form.nursOrgAdmdvs = ymk.loc_admdvs
      this.form.nursOrgServitemPrcuntNo = ymk.prcunt_no
      this.form.nursOrgServitemMemo = ymk.serv_cont
      this.form.admdvs = ymk.loc_admdvs
      this.form.locAdmdvs = ymk.loc_admdvs
      this.form.overlmtDspoWay = ymk.overlmt_dspo_way
      this.form.ownpayFlag = ymk.ownpay_flag
    },
    /**
     * 打开异名库时，实时查询
     */
    openYmk() {
      this.drawerTable = true
      this.loading = false
    },
    /**
     * 打开异名库时，实时查询
     */
    getYmk() {
      this.loading = true
      crudPricServiceItem.queryPricServiceItem8106({ longtermServitemName: this.paramlongtermServitemName, longtermServType: this.paramlongtermServType }).then(res => {
        console.log(res)
        this.ymkData = res.content
        this.loading = false
      }).catch(err => {
        this.loading = false
        console.log(err.data.message)
      })
    }
  }
}
</script>

<style scoped>

</style>
